﻿<UserControl x:Class="AdventureWorks.Shopper.Views.BillingAddressUserControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:controls="using:AdventureWorks.Shopper.Controls"
             xmlns:behaviors="using:AdventureWorks.Shopper.Behaviors"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d">

    <!-- Page content -->
    <Grid x:Name="ContentGrid">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <!-- Name -->
        <Grid x:Name="NameGrid"
              Margin="0,20,0,0"
              Grid.Row="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition Width="150" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>

            <!-- First Name -->
            <TextBox x:Name="FirstName"
                                       x:Uid="FirstName"
                                       Header="First Name*"
                                       AutomationProperties.AutomationId="FirstNameTextBox"
                                       AutomationProperties.IsRequiredForForm="True"
                                       Margin="5,0"
                                       Grid.Row="0"
                                       Grid.Column="0"
                                       Text="{Binding Address.FirstName, Mode=TwoWay}"
                                       IsEnabled="{Binding IsEnabled}"
                                       behaviors:HighlightFormFieldOnErrors.PropertyErrors="{Binding Address.Errors[FirstName]}" />
            <TextBlock x:Name="ErrorsFirstName"
                       Style="{StaticResource ErrorMessageStyle}"
                       Grid.Row="1"
                       Grid.Column="0"
                       Text="{Binding Address.Errors[FirstName], Converter={StaticResource FirstErrorConverter}}"
                       TextWrapping="Wrap" />

            <!-- Middle Initial -->
            <TextBox x:Name="MiddleInitial"
                                       x:Uid="MiddleInitial"
                                       Header="Middle Initial"
                                       AutomationProperties.AutomationId="MiddleInitialTextBox"
                                       Margin="5,0"                  
                                       Grid.Row="0"
                                       Grid.Column="1"
                                       Text="{Binding Address.MiddleInitial, Mode=TwoWay}"
                                       IsEnabled="{Binding IsEnabled}"
                                       behaviors:HighlightFormFieldOnErrors.PropertyErrors="{Binding Address.Errors[MiddleInitial]}" />
            <TextBlock x:Name="ErrorsMiddleInitial"
                       Style="{StaticResource ErrorMessageStyle}"
                       Grid.Row="1"
                       Grid.Column="1"
                       Text="{Binding Address.Errors[MiddleInitial], Converter={StaticResource FirstErrorConverter}}"
                       TextWrapping="Wrap" />

            <!-- Last Name -->
            <TextBox x:Name="LastName" 
                                       x:Uid="LastName"
                                       Header="Last Name*"
                                       AutomationProperties.AutomationId="LastNameTextBox"
                                       AutomationProperties.IsRequiredForForm="True"
                                       AutomationProperties.LabeledBy="{Binding ElementName=TitleLastName}"
                                       Margin="5,0"
                                       Grid.Row="0"
                                       Grid.Column="2"
                                       Text="{Binding Address.LastName, Mode=TwoWay}"
                                       IsEnabled="{Binding IsEnabled}"
                                       behaviors:HighlightFormFieldOnErrors.PropertyErrors="{Binding Address.Errors[LastName]}" />
            <TextBlock x:Name="ErrorsLastName"
                       Style="{StaticResource ErrorMessageStyle}"
                       Grid.Row="1"
                       Grid.Column="2"
                       Text="{Binding Address.Errors[LastName], Converter={StaticResource FirstErrorConverter}}"
                       TextWrapping="Wrap" />
        </Grid>

        <!-- Address -->
        <Grid x:Name="AddressGrid"
              Grid.Row="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <TextBox x:Name="Address"
                                       x:Uid="Address"
                                       Header="Address*"
                                       AutomationProperties.AutomationId="AddressTextBox"
                                       AutomationProperties.IsRequiredForForm="True"
                                       Margin="5,0"                  
                                       Grid.Row="0"
                                       Grid.Column="0"
                                       Grid.ColumnSpan="4"
                                       Text="{Binding Address.StreetAddress, Mode=TwoWay}"
                                       IsEnabled="{Binding IsEnabled}"
                                       behaviors:HighlightFormFieldOnErrors.PropertyErrors="{Binding Address.Errors[StreetAddress]}" />
            <TextBlock x:Name="ErrorsAddress"
                       Style="{StaticResource ErrorMessageStyle}"
                       Grid.Row="1"
                       Grid.Column="0"
                       Grid.ColumnSpan="3"
                       Text="{Binding Address.Errors[StreetAddress], Converter={StaticResource FirstErrorConverter}}"
                       TextWrapping="Wrap" />

            <TextBox x:Name="OptionalAddress"
                                       x:Uid="OptionalAddress"
                                       Header="Optional Address"
                                       AutomationProperties.AutomationId="OptionalAddressTextBox"
                                       Grid.Row="2"
                                       Grid.Column="0"
                                       Grid.ColumnSpan="4"
                                       IsEnabled="{Binding IsEnabled}"
                                       Margin="5,0"
                                       Text="{Binding Address.OptionalAddress, Mode=TwoWay}"
                                       behaviors:HighlightFormFieldOnErrors.PropertyErrors="{Binding Address.Errors[OptionalAddress]}" />
            <TextBlock x:Name="ErrorsOptionalAddress"
                       Style="{StaticResource ErrorMessageStyle}"
                       Grid.Row="3"
                       Grid.Column="0"
                       Grid.ColumnSpan="4"
                       Text="{Binding Address.Errors[OptionalAddress], Converter={StaticResource FirstErrorConverter}}"
                       TextWrapping="Wrap" />
        </Grid>

        <!-- Area -->
        <Grid x:Name="AreaGrid"
              Grid.Row="2">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>

            <!--City-->
            <TextBlock x:Name="TitleArea"
                       x:Uid="TitleArea"
                       Style="{StaticResource FormTitleStyle}"
                       Margin="5,0"
                       Grid.Row="0"
                       Grid.Column="0"
                       Text="Area" />
            <TextBox x:Name="City"
                                       x:Uid="City"
                                       AutomationProperties.AutomationId="CityTextBox"
                                       AutomationProperties.IsRequiredForForm="True"
                                       Margin="5,0"                  
                                       Grid.Row="1"
                                       Grid.Column="0"
                                       Text="{Binding Address.City, Mode=TwoWay}"
                                       IsEnabled="{Binding IsEnabled}"
                                       PlaceholderText="City"
                                       behaviors:HighlightFormFieldOnErrors.PropertyErrors="{Binding Address.Errors[City]}" />
            <TextBlock x:Name="ErrorsCity"
                       Style="{StaticResource ErrorMessageStyle}"
                       Grid.Row="2"
                       Grid.Column="0"
                       Text="{Binding Address.Errors[City], Converter={StaticResource FirstErrorConverter}}"
                       TextWrapping="Wrap" />

            <!-- State -->
            <ComboBox x:Name="State"
                      x:Uid="StateComboBox"
                      AutomationProperties.AutomationId="StateComboBox"
                      AutomationProperties.IsRequiredForForm="True"
                      Margin="5,0"
                      Grid.Row="1"
                      Grid.Column="1"
                      ItemsSource="{Binding States}"
                      DisplayMemberPath="Value"
                      SelectedValuePath="Id"
                      SelectedValue="{Binding Address.State, Mode=TwoWay}"
                      behaviors:ComboBoxKeyboardSelection.Enabled="True"
                      IsEnabled="{Binding IsEnabled}"
                      behaviors:HighlightFormComboOnErrors.PropertyErrors="{Binding Address.Errors[State]}" />
            <TextBlock x:Name="ErrorsState"
                       Style="{StaticResource ErrorMessageStyle}"
                       Grid.Row="2"
                       Grid.Column="1"
                       Text="{Binding Address.Errors[State], Converter={StaticResource FirstErrorConverter}}"
                       TextWrapping="Wrap" />

            <!-- ZipCode -->
            <TextBox x:Name="ZipCode"
                                       x:Uid="PostalCodeTextBox"
                                       AutomationProperties.AutomationId="PostalCodeTextBox"
                                       Margin="5,0"
                                       Grid.Row="1"
                                       Grid.Column="2"
                                       Text="{Binding Address.ZipCode, Mode=TwoWay}"
                                       IsEnabled="{Binding IsEnabled}"
                                       PlaceholderText="Zip Code"
                                       AutomationProperties.IsRequiredForForm="True"
                                       InputScope="Number"
                                       behaviors:HighlightFormFieldOnErrors.PropertyErrors="{Binding Address.Errors[ZipCode]}" />
            <TextBlock x:Name="ErrorZipCode"
                       Style="{StaticResource ErrorMessageStyle}"
                       Grid.Row="2"
                       Grid.Column="2"
                       Text="{Binding Address.Errors[ZipCode], Converter={StaticResource FirstErrorConverter}}"
                       TextWrapping="Wrap" />

        </Grid>

        <!-- Phone -->
        <Grid x:Name="PhoneGrid"
              Grid.Row="3">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <TextBox x:Name="Phone"
                                       x:Uid="Phone"
                                       Header="Phone*"
                                       AutomationProperties.AutomationId="PhoneTextBox"
                                       AutomationProperties.IsRequiredForForm="True"
                                       Margin="5,0"
                                       Grid.Row="0"
                                       Text="{Binding Address.Phone, Mode=TwoWay}"
                                       IsEnabled="{Binding IsEnabled}"
                                       InputScope="TelephoneNumber"
                                       behaviors:HighlightFormFieldOnErrors.PropertyErrors="{Binding Address.Errors[Phone]}" />
            <TextBlock x:Name="ErrorPhone"
                       Style="{StaticResource ErrorMessageStyle}"
                       Grid.Row="1"
                       Grid.Column="0"
                       Text="{Binding Address.Errors[Phone], Converter={StaticResource FirstErrorConverter}}"
                       TextWrapping="Wrap" />
        </Grid>
        <VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="DefaultLayout" />
                <VisualState x:Name="PortraitLayout" />
                <VisualState x:Name="MinimalLayout">
                    <Storyboard>
                        <!-- Content -->
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Grid.Margin"
                                                       Storyboard.TargetName="ContentGrid">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:String>0,0,20,0</x:String>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <!-- Name -->
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Grid.ColumnDefinitions[0].Width"
                                                       Storyboard.TargetName="NameGrid">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>*</DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Grid.ColumnDefinitions[1].Width"
                                                       Storyboard.TargetName="NameGrid">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>Auto</DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Grid.ColumnDefinitions[2].Width"
                                                       Storyboard.TargetName="NameGrid">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>Auto</DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Row)"
                                                       Storyboard.TargetName="MiddleInitial">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Int32>2</x:Int32>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)"
                                                       Storyboard.TargetName="MiddleInitial">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Int32>0</x:Int32>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Row)"
                                                       Storyboard.TargetName="ErrorsMiddleInitial">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Int32>3</x:Int32>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)"
                                                       Storyboard.TargetName="ErrorsMiddleInitial">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Int32>0</x:Int32>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Row)"
                                                       Storyboard.TargetName="LastName">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Int32>4</x:Int32>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)"
                                                       Storyboard.TargetName="LastName">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Int32>0</x:Int32>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Row)"
                                                       Storyboard.TargetName="ErrorsLastName">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Int32>5</x:Int32>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)"
                                                       Storyboard.TargetName="ErrorsLastName">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Int32>0</x:Int32>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>

                        <!-- Area -->
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Grid.ColumnDefinitions[0].Width"
                                                       Storyboard.TargetName="AreaGrid">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>*</DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Grid.ColumnDefinitions[1].Width"
                                                       Storyboard.TargetName="AreaGrid">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>Auto</DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Grid.ColumnDefinitions[2].Width"
                                                       Storyboard.TargetName="AreaGrid">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>Auto</DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)"
                                                       Storyboard.TargetName="State">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Int32>0</x:Int32>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Row)"
                                                       Storyboard.TargetName="State">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Int32>3</x:Int32>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)"
                                                       Storyboard.TargetName="State">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Thickness>5,20,5,0</Thickness>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Row)"
                                                       Storyboard.TargetName="ErrorsState">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Int32>4</x:Int32>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)"
                                                       Storyboard.TargetName="ErrorsState">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Int32>0</x:Int32>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)"
                                                       Storyboard.TargetName="ZipCode">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Int32>0</x:Int32>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Row)"
                                                       Storyboard.TargetName="ZipCode">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Int32>5</x:Int32>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)"
                                                       Storyboard.TargetName="ZipCode">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Thickness>5,20,5,0</Thickness>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)"
                                                       Storyboard.TargetName="ErrorZipCode">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Int32>0</x:Int32>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Row)"
                                                       Storyboard.TargetName="ErrorZipCode">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Int32>6</x:Int32>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</UserControl>
